<html>

<head>
    <title>基于vue+elementui</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="../components/element-ui/2.12.0/theme-chalk/index.css">
    <style>
        body {
            margin: 0px;
        }

        /* 所有 */
        #app {
            width: 100%;
            height: 100%;
        }

        tbody {
            font-size: 15px;
            color: #4b595f;
        }

        /* 头 */
        .el-header {
            background-color: #24292e;
            color: #FFFFFF;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        /* 左边内容区 */
        .el-aside {
            color: #333;
            width: 200px;
        }

        /* 右边内容区 */
        .el-main {
            min-height: 600px;
            width: 100%;
        }

        /* 尾 */
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            width: 100%;
            height: 30px;
            line-height: 30px;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>王小虎</span>
        </el-header>
        <el-container>
            <el-aside>
                <el-menu :default-active="activeIndex">
                    <el-menu-item index="1" @click="openIframe(aboutMeUrl)"><i class="el-icon-service"></i>关于我
                    </el-menu-item>
                    <el-submenu :index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id">
                        <template slot="title"><i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}</template>
                        <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">
                            <template slot="title">{{ secondMenu.name }}</template>
                            <el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id"
                                          :key="thirdMenu.id" @click="openIframe(thirdMenu.url)">{{ thirdMenu.name }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe style="width:100%; height:100%; border: 0;" :src="iframeUrl"></iframe>
            </el-main>
        </el-container>
        <el-footer style="width:100%; height:30px; border: 0;">{{copyright}}</el-footer>
    </el-container>

</div>
<!--引入vue -->
<script src="../components/vue/2.6.10/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../components/element-ui/2.12.0/index.js"></script>
<script src="../js/menus.js"></script>
.

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            copyright: '© 2019 XXX 版权所有',
            activeIndex: "1",
            aboutMeUrl: "about.html",
            iframeUrl: "about.html",
            menus: leftMenus
        },
        methods: {
            openIframe(url) {
                this.iframeUrl = url;
            },
        }
    });
</script>

</body>

</html>
